<template>
  <div id="main">
    <div class="nav">
      <img :src="back" alt="" @click="handleBack" class="back">
    </div>
    <div class="content">
      <div class="subscribed">
        <div class="title">
          <div>我的订阅</div>
          <div class="edit" @click="handleEdit">{{showLabel ? '完成' : '编辑'}}</div>
        </div>
        <div class="subscribe-tags" ref="sortableList">
          <div class="tag" :class="{ unsortable: item.id == null }" v-for="(item,index) in tagList" :key="item.id"
               style="width:100px" :id="item.id" :draggable="item.id != null">
            <span :style="item.id == null ? 'color:#ccc' : ''">{{item.name}}</span>
            <i v-if="!(item.id == null) && showLabel"  class="el-icon-remove"
               style="color:#f29600;margin-left:2px;font-size:17px" @click="handleDel(item.id)"></i>
          </div>
        </div>
      </div>
      <div class="noSubscribe">
        <div class="title">
          <div>暂未订阅</div>
        </div>
         <div class="subscribe-tags">
          <div class="tag" v-for="(item,index) in tagListNo" :key="index"  style="width:100px">
            <span>{{item.name}}</span><van-icon name="plus" @click="handleAdd(item.id)"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Sortable from 'sortablejs';
import { channelListApi,updateChannelApi,deleteChannelApi,addChannelApi } from '@/api/share'
import {antiShake} from '@/utils/antie.js'//防抖函数
export default {
  name: "index",
  data(){
    return{
       back:require("@/assets/search/back.png"),
       showLabel:false,
       tagList: [],
       tagListNo: [],
       token:''
    }
  },
  mounted(){
    const options = {
      onEnd: (val) => {
        // 拖拽排序完成后的处理逻辑
        this.handleSortEnd(val)
      },
      filter: '.unsortable'
    };
    const sortableList = this.$refs.sortableList;
    Sortable.create(sortableList, options);
    this.token = !this.getParam("token") ? "" : decodeURI(this.getParam("token"))
    this.getDataList()
    this.getDataListNo()
  
  },
  created(){
   
  },
  methods:{
     getParam(name) {
          if (window.location.hash.indexOf("?") != -1) {
              const query = window.location.hash.split("?")[1];
              const vars = query.split("&");
              for (var i = 0; i < vars.length; i++) {
                  var pair = vars[i].split("=");
                      if (pair[0] == name) {
                          return pair[1];
                      }
                  }
          } else {
              return "";
          }
      },
    //已订阅
    getDataList(){
      let typeId = 0
      let data={
        typeId: typeId,
        token:this.token
      }
       channelListApi(data).then((res)=>{
        this.tagList = res.data
      })
    },
    //暂未订阅
    getDataListNo(){
      let typeId = 1
      let data={
        typeId: typeId,
        token:this.token
      }
       channelListApi(data).then((res)=>{
        this.tagListNo = res.data
      })
    },
     handleBack(){//返回
        this.$router.go(-1)
      //   let data ={
      //     action:'back',
      //     param:{
      //       type:"backToRoot"
      //    }
      // }
      // getInfoFromVue.postMessage(JSON.stringify(data))
     },
     handleEdit(){
      this.showLabel = !this.showLabel
     },
    //  获取排序后的id集合
     handleSortEnd(row){
      const reorderedItems = Array.from(row.target.children).map((li) => {
        const itemId = li.getAttribute('id');
        return itemId
      });
      let ids = []
      ids = reorderedItems.filter(item => item !== null)
      this.handleSort(ids)
     },
    //  拖拽排序
     handleSort(ids){
      let data={
        ids:ids,
        token:this.token
      }
       updateChannelApi(data).then(res => {
        // console.log(res)
        
      }).catch(err => {
        console.log(err)
      })
     },
     //删除订阅
      handleDel: antiShake(  function (id) {
       let data={
        id:id,
        token:this.token
      }
       deleteChannelApi(data).then((res)=>{
        this.getDataList()
        this.getDataListNo()
      })
    }),
    // 新增订阅
    handleAdd: antiShake(  function (id){
       let data={
        id:id,
        token:this.token
      }
      addChannelApi(data).then((res)=>{
        this.getDataList()
        this.getDataListNo()
      })
    })
  }
}
</script>

<style lang="less" scoped>
#main{
  height: 100vh;
  .nav{
      display: flex;
      height:33px;
      background: #f29600;
      justify-content: space-between;
      align-items: center;
      flex-direction: row;
      padding: 4px 16px 7px 16px;
  }
  .content{
    padding: 10px;
    .subscribed{
      background: #fef7eb;
      padding: 12px 8px;
      border-radius: 10px;
      font-size: 17px;
      // letter-spacing: 10px;
      line-height: 23.17px;
      .title{
        font-size: 17px;
        font-weight: 500;
        letter-spacing: 1px;
        display: flex;
        color: rgba(0, 0, 0, 1);
        justify-content: space-between;
        .edit{
          opacity: 1;
          font-size: 16px;
          font-weight: 500;
          letter-spacing: 0px;
          line-height: 23.17px;
          color: rgba(242, 150, 0, 1);
        }
      }
      .subscribe-tags{
        padding: 10px 15px;
        display: grid;
        grid-template-columns: auto auto auto;
        justify-items: stretch;
        justify-content: center;
        align-items: center;
        // display: flex;
        .tag{
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 2px;
          border: 1px solid #ccc;
          border-radius: 20px;
          margin: 10px 5px;
        }
          .unsortable {
            pointer-events: none;
        }
      }
      
      @media screen and (max-width:374px) {
        .subscribe-tags{
        padding: 10px 15px;
        display: grid;
        grid-template-columns: auto auto;
        justify-items: stretch;
        .tag{
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 2px;
          border: 1px solid #ccc;
          border-radius: 20px;
          margin: 10px 6px;
         }
       }
      }
    }
    .noSubscribe{
      background: rgba(250, 250, 250, 1);
      margin-top: 62px;
      padding: 12px 8px;
      border-radius: 10px;
      font-size: 17px;
      // letter-spacing: 10px;
      line-height: 23.17px;
       .title{
        font-size: 17px;
        font-weight: 500;
        letter-spacing: 1px;
        display: flex;
        color: rgba(0, 0, 0, 1);
        justify-content: space-between;
       
      }
      .subscribe-tags{
        padding: 10px 15px;
        display: grid;
        grid-template-columns: auto auto auto;
        justify-items: stretch;
        justify-content: center;
        align-items: center;
        font-size: 17px;
        .tag{
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 2px;
          border: 1px solid #ccc;
          border-radius: 20px;
          margin: 10px 5px;
        }
      }
       @media screen and (max-width:374px) {
        .subscribe-tags{
        padding: 10px 15px;
        display: grid;
        grid-template-columns: auto auto;
        justify-items: stretch;
        font-size: 12px;
        .tag{
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 2px;
          border: 1px solid #ccc;
          border-radius: 20px;
          margin: 10px 5px;
         }
       }
      }
    }
  }


}

</style>